<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Form表单验证</title>
	</head>

	<body>
		<div class="col-md-6">
			<form role="form" class="form-horizontal">
				<div class="form-group">
					<div class="col-md-4">
						<label for="name">1.必填项</label>
					</div>
					<div class="col-md-8">
						<input class="form-control" id="name" type="text" required ng-model='user.name' />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="minlength">2.最小长度=5</label>
					</div>
					<div class="col-md-8">
						<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="minlength">3.最大长度=20</label>
					</div>
					<div class="col-md-8">
						<input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="minlength">4. 模式匹配</label>
					</div>
					<div class="col-md-8">
						<input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="email">5. 电子邮件</label>
					</div>
					<div class="col-md-8">
						<input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="age">6. 数字</label>
					</div>
					<div class="col-md-8">
						<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-4">
						<label for="url"> 7. URL</label>
					</div>
					<div class="col-md-8">
						<input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
					</div>
				</div>
				<div class="form-group text-center">
					<input class="btn btn-primary btn-lg" type="submit" value="提交" />
				</div>
			</form>
		</div>
		<div class="col-md-12">
			1.必填项:{{user.name}} <br> 2.最小长度=5:{{user.minlength}}
			<br> 3.最大长度=20:{{user.maxlength}}
			<br> 4.模式匹配:{{user.pattern}}
			<br> 5.电子邮件:{{user.email}}
			<br> 6.数字:{{user.age}}
			<br> 7.URL:{{user.url}}
			<br>
		</div>
	</body>

</html>